<!--创作剪辑-->
<template>
  <div class="ele-body" style="padding-bottom: 71px">
    <!--   :rules="rules"   -->
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="80px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card
        shadow="never"
        header="创作剪辑"
        body-style="padding: 22px 22px 0 22px;"
      >
        <el-row :gutter="15">
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
            <el-form-item label="剪辑名称:" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入剪辑名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
            <el-form-item label="剪辑状态:" prop="status">
              <el-select
                v-model="form.status"
                placeholder="请选择剪辑状态"
                class="ele-block"
                clearable
                @clear="see()"
              >
                <el-option label="未剪辑" :value="0" />
                <el-option label="剪辑中" :value="1" />
                <el-option label="剪辑完成" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
            <el-form-item label="工程类型:" prop="projectType">
              <el-select
                v-model="form.projectType"
                placeholder="请选择工程类型"
                class="ele-fluid"
                clearable
                @clear="see()"
              >
                <el-option label="手动输入台本" :value="1" />
                <el-option label="根据音频导入台本" :value="2" />
                <el-option label="根据文字台本导入" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
            <el-form-item label="剪辑模式:" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择剪辑模式"
                class="ele-fluid"
                clearable
                @clear="see()"
              >
                <!--            1 * 1脚本剪辑 =AI剪辑 * 2自定义剪辑=口播剪辑 * 3图文剪辑-->
                <el-option label="AI剪辑" :value="1" />
                <el-option label="口播剪辑" :value="2" />
                <el-option label="图文剪辑" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="创建时间:" prop="datetime">
              <el-date-picker
                v-model="form.datetime"
                type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd HH:mm:ss"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row style="margin-bottom: 10px">
          <el-col  :xs="12" :sm="12" :lg="12" :xl="12">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
          <el-col  :xs="12" :sm="12" :lg="12" :xl="12" align="right">
            <el-button type="primary" class="colorBlue" @click="newList()">新建剪辑</el-button>
          </el-col>
        </el-row>
        <table-list
          @see="see"
          :list="list"
          :listCount="listCount"
          :form="form"
        />
      </el-card>
    </el-form>
    <new-list
      v-if="dataList"
      :visible.sync="newListShow"
      :dataList="dataList"
      :radioList="radioList"
      @done="onDone"
      @query="query"
    />
    <!--    @done="resetting"-->
  </div>
</template>

<script>
  import newList from './components/new-list.vue';
  import OrgUserList from './components/org-user-list.vue';
  import tableList from './components/table-list.vue';
  import { projectPage, scaleList} from "@/api/creatCenter/authoringClips";
  import {listUserFiles, publicFile} from "@/api/creatCenter/material";
  export default {
    name: "authoringClips",
    components: {OrgUserList,tableList,newList},
    data() {
      return {
        isNew:false,
        codeImg:'',
        //剪辑比例list
        radioList:[],
        //创作剪辑list
        list:[],
        listCount:0,
        // 新建剪辑弹窗是否打开
        newListShow:false,
        // 列表数据
        dataList: [],
        // 表单提交状态
        loading: false,
        // 表单数据
        form: {
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
        },
        // 表单验证规则
        rules: {
          name: [
            {
              required: true,
              message: '请输入剪辑名称',
              trigger: 'blur'
            }
          ],
          status: [
            {
              required: true,
              message: '请选择混剪状态',
              trigger: 'blur'
            }
          ],
          datetime: [
            {
              required: true,
              message: '请选择创建日期',
              trigger: 'blur'
            }
          ],
          projectType: [
            {
              required: true,
              message: '请选择工程类型',
              trigger: 'blur'
            }
          ],
          type: [
            {
              required: true,
              message: '请选择混剪模式',
              trigger: 'blur'
            }
          ],
        }
      }},
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    mounted(){
      document.addEventListener('visibilitychange', this.is_Visible)
      console.log("mounted1e3qeqweq=============")
    },

    destroyed() {
      document.removeEventListener('visibilitychange', this.is_Visible)
      console.log("销毁直接隐藏，然后再进判断（修改）destroyed==========")
    },
    activated(){
      console.log("路由刷新5555555555555555555555555555555555555555555")
      this.dataLists()
    },
    created() {
      console.log("进入查询created211111111111111111=============",this.$route.query)
      if(this.$route.query){
        console.log("路由刷新111111111")
        this.dataLists()
      }
    },
    methods: {
      is_Visible: function (e) {
        if (e.target.visibilityState === "visible") {
          //进入
          console.log("进入========")
          this.dataLists()
        } else if (e.target.visibilityState === "hidden") {
          // console.log("离开========")

          //离开
        }
      },
      // 分页查询剪辑工程列表
      see(){
        console.log("进入查询=============")
        let param = {}
        Object.assign(param, this.form, {
          startTime:  this.form.datetime?this.form.datetime[0] + ' 00:00:00':'',
          endTime:  this.form.datetime?this.form.datetime[1] + ' 23:59:59':''
        })
        projectPage(param)
          .then((data) => {
            this.onDone();
            this.list=data.list;
            this.listCount=data.count;
            console.log("this.list",this.list,'this.dataList',this.dataList)
            // 获取——关联活动名称
            for(let i=0;i<this.dataList.length;i++){
              for (let j=0;j<this.list.length;j++){
                if(this.dataList[i].id==this.list[j].projectFolderId){
                  this.list[j].name=this.dataList[i].name
                }
              }
            }
          })
          .catch((e) => {
            console.log('进入失败',e)
            this.$message.error(e.msg);
          });
        // });
      },
      //重置
      resetting(){
        // 前提是表单项中要使用prop属性，绑定input中的v-model所绑定的字段，才可以被清空
        this.$refs.form.resetFields()
        this.form.datetime=''
        this.dataLists()
      },

      select(e){
        console.log("日期选择e============",e,'form.datetime',this.form.datetime)
      },
      /* 完成刷新列表数据 */
      onDone() {
        this.$emit('done');
      },
      //获取所有文件夹
      async dataLists() {
        this.dataList = '';
        //用户所创建的文件
        let userData = await listUserFiles({
          name:'',
          isCommon:'',
          //查公共文件根目录不需要传，子级需要
          username: this.$store.state.user.info.username,
          //父级目录：初次传0
          parentId: 0
        })
        let pubData = [] //文件夹
        pubData = await publicFile()
        //es6支持...数组合并
        let data  = [...pubData, ...userData];
        this.dataList = data.map((d) => {
          return Object.assign({ name: d.name }, d, {
            // isDirectory: true, //代表是文件夹
            isDirectory: d.isDirectory === 1 ? true : false,
            length: this.formatLength(d.length)
          })
        })
        console.log(data,'this.dataList2234e3',this.dataList)
        //拿到根目录文件夹后，调用表格
        this.see()
      },
      newList(){
        this.newListShow = true;
        /* 查询“根目录”文件列表 */
        this.query();
      },
      async query() {
        console.log("进入查询============")
        this.dataList = [];
        //用户所创建的文件
        let userData = await listUserFiles({
          name:'',
          isCommon:0,
          //查公共文件根目录不需要传，子级需要
          username: this.$store.state.user.info.username,
          //父级目录：初次传0
          parentId: 0
        })
        /*let pubData = [] //文件夹
        pubData = await publicFile()*/
        //es6支持...数组合并
        //...pubData,  取消选择公共文件夹（修改
        let data  = [ ...userData];
        this.dataList = data.map((d) => {
          return Object.assign({ name: d.name }, d, {
            // isDirectory: true, //代表是文件夹
            isDirectory: d.isDirectory === 1 ? true : false,
            length: this.formatLength(d.length)
          })
        })
        console.log(data,'this.dataList',this.dataList)
        //剪辑比例(需修改)
        scaleList(
          {
            //  scaleType: 1 1剪辑比例 (可选择，不传则查全部）
          }
        )
          .then((data) => {
            this.radioList=data.data;
            for(let i=0;i<this.radioList.length;i++){
              if(this.radioList[i].scaleType===1){
                this.radioList[i].title="竖版";
                this.radioList[i].classname="d-bj";
              }
              if(this.radioList[i].scaleType===2){
                this.radioList[i].title="横版";
                this.radioList[i].classname="d-bj2";
              }
            }
            console.log('22222剪辑比例radioItem',this.radioList)

          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      },


      /* 格式化文件大小 */
      formatLength(length) {
        if (length == null) {
          return '-';
        }
        if (length < 1024) {
          return length + 'B';
        } else if (length < 1024 * 1024) {
          return (length / 1024).toFixed(1) + 'KB';
        } else if (length < 1024 * 1024 * 1024) {
          return (length / 1024 / 1024).toFixed(1) + 'M';
        } else {
          return (length / 1024 / 1024 / 1024).toFixed(1) + 'G';
        }
      },
    }
  }
</script>

<style scoped>
  /*  .el-input__inner{
      border: none;
    }*/
  .montage-btn{
    color: #fff;
    width: 94px;
    height: 33px;
    background: #1E6CEB;
    border-radius: 2px;
  }
  .inquire-about,.resetting-btn{
    width: 80px;
    height: 33px;
    border-radius: 2px;
  }
  .inquire-about{
    margin-right: 20px;
    background: #1E6CEB;
  }
  .resetting-btn{
    background: #F5F5F5;
  }

</style>
